<template>
  <div class="content">
    <div class="table-box">
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%"
        class="onplay-table"
        v-loading="loading"
      >
        <el-table-column
          label="企业名称"
          align="center"
        >
          <template slot-scope="scope">
            <div
              class="item-name item-name-companyname"
              @click="showCompanyInfo(scope.row)"
            >{{scope.row.companyname}}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="充值金额"
          align="center"
        >
          <template slot-scope="scope">
            <div class="item-cash">{{scope.row.totalfee}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rechargdate"
          label="充值时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="oppaccountname"
          label="银行账户"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="oppaccountno"
          label="银行账号"
          align="center"
        ></el-table-column>
        <el-table-column
          label="充值凭证"
          align="center"
        >
          <template slot-scope="scope">
            <div
              class="item-number"
              @click="LookInfo(scope.row)"
            >凭证</div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          v-if="optShowTwo && global.powerAllBtn.cwgl.dgczspBtn"
        >
          <template slot-scope="scope">
            <div
              class="item-name item-name-companyname"
              @click="toExamine(scope.row)"
            >审核</div>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="CurrentChange"
        :current-page="form.pagenum"
        :page-sizes="[10,20, 30, 50,100]"
        :page-size="form.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="form.total"
        background
      ></el-pagination>

      <!-- <el-pagination @current-change="OnplayCurrentChange" :total="Onplay.total" :current-page="Onplay.pageNum" :page-size="Onplay.pageSize" layout="total, prev, pager, next, jumper" background>
      </el-pagination>-->

    </div>
    <el-dialog
      title="充值凭证"
      :visible.sync="dialogVisible"
      width="30%"
      custom-class="dialog_imgBox"
    >
      <img
        :src="'data:image/png;base64,'+imgbase64"
        alt
        width="100%"
        height="100%"
      >
    </el-dialog>
    <el-dialog
      :visible.sync="checkFlag"
      width="1040px"
      class="jhdialog"
    >
      <check
        v-show="checkFlag"
        :companyName="companyname"
        :companyId="companyid"
        :type="'0'"
        :tabNum="'4'"
      ></check>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogTableVisible"
      width="600px"
      class="jhdialog"
    >
      <div class="tabShow">
        <div class="warn-dialog-header"><span>充值审批结果</span></div>
        <div style="height:40px;display: flex;align-items: center;padding-top:30px;">
          <el-radio-group
            v-model="radio"
            style="padding:0 20px"
            @change="resultChange"
          >
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">驳回</el-radio>
          </el-radio-group>
          <el-input
            v-show="radio==='2'"
            style="width:400px"
            placeholder="请填写驳回原因"
            v-model="textarea"
          ></el-input>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="concelCash">取 消</el-button>
          <el-button
            type="primary"
            @click="confirmCash"
          >提 交</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import check from '../../socical/socialCheck/check.vue'
export default {
  components: {
    check
  },
  data () {
    return {
      tableData: [],
      loading: false,
      imgbase64: '',
      checkFlag: false,
      dialogVisible: false,
      companyname: "",
      companyid: "",
      form: {
        pagesize: 10,
        pagenum: 1,
        total: 0,
      },
      optShowTwo: false,
      radio: "1",
      dialogTableVisible: false,
      textarea: "",
      dialogVisible: false,
      uploadForm: {
        accessoryid: '',
        updownmark: '1'
      },
      allData: {},
      global: {},
    }
  },
  props: ['type'],
  created () {
    this.global = this.GLOBAL;
    let department = JSON.parse(localStorage.getItem('userinfo')).department;
    if (department == "充值二部") {
      this.optShowTwo = true
    }
    this.getList();
  },
  methods: {
    //获取列表
    getList () {
      if (!this.type) {
        return;
      }
      this.loading = true;
      this.$axios.post('/app/v1/platform/unusual/todoList', {
        "type": this.type,
        pagesize: this.form.pagesize,
        pagenum: this.form.pagenum
      }).then(resp => {
        if (resp.data.message === 'success.') {
          let temp = resp.data.data.list;
          this.tableData = temp || [];
          this.loading = false;
          this.form.total = Number(resp.data.data.totalnum);
          this.form.pagesize = Number(resp.data.data.pagesize);

        }
      })
    },
    //线下充值记录分页查询
    CurrentChange (val) {
      this.form.pagenum = val;
      this.getList();
    },
    //分页
    //分页
    handleSizeChange (val) {
      this.form.pagenum = 1;
      this.form.pagesize = val;
      this.getData();
    },

    //分页查询
    ScheduleCurrentChange (val) {
      this.form.pagenum = val;
      this.getData();
    },
    toExamine (row) {
      this.allData = row;
      this.radio = "1";
      this.dialogTableVisible = true;
    },
    // 充值审批
    confirmCash (row) {
      if (this.textarea.trim() === "" && this.radio === "2") {
        this.$message({
          message: "请填写不通过原因!",
          type: "warning"
        });
        return;
      }
      let operation = this.radio === "1" ? "通过" : "驳回";
      this.$confirm(`此操作将${operation}该充值, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = {
          companyid: this.allData.companyid,
          totalfee: this.allData.totalfee,
          accessoryid: this.allData.accessoryid,
          accountname: this.allData.oppaccountname,
          matchingid: this.allData.orderid,
          reportid: this.allData.reportid,
          status: this.radio

        }
        this.submit(obj);

      }).catch(() => {
        this.$message({
          type: 'warning',
          message: '已取消删除'
        });
      });
    },
    //取消
    concelCash () {
      this.dialogTableVisible = false;
    },
    resultChange (r) {
      if (r === '1') this.textarea = '';
    },
    LookInfo (row) {
      this.uploadForm.accessoryid = row.accessoryid
      this.$axios.post('/system/v1/common/upAndDown', this.uploadForm).then(res => {
        this.imgbase64 = res.data.data.filecontent;
      });
      this.dialogVisible = true;

    },
    showCompanyInfo (row) {
      this.companyid = row.companyid;
      this.companyname = row.companyname;
      this.checkFlag = true;
    },

    //确定充值
    submit (obj) {
      this.$axios.post('/app/v1/platform/recharge/offlineSubmit', obj).then(resp => {
        if (resp.data.code === 1) {
          this.dialogTableVisible = false;
          this.getList();
          // this.success = true;
          // var that = this;
          // this.clearData();
          // this.getTableData();
          // setTimeout(() => {
          //   that.success = false;
          //   that.cash = false;
          //   that.Item = '1';
          //   that.acountTitle = '对公账户充值(未匹配)';
          // }, 2000)
        } else {
          this.dialogTableVisible = false;
          this.getList();
          this.$message({
            type: 'warning',
            message: resp.data.message
          });
        }
      })
    },



  },


}
</script>
<style scoped>
.content {
  background: #fff;
}
.el-row {
  padding-top: 20px;
}
.two_el_row {
  padding-top: 0px;
}
.lowerBrick {
  color: #0064e4;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #0064e4;
  padding: 0 26px;
  cursor: pointer;
  margin-bottom: 10px;
}
.dialog-footer {
  margin-top: 30px;
  text-align: center;
  padding-bottom: 20px;
}
.item-number {
  color: #0064e4;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: underline;
}
.item-name-companyname {
  cursor: pointer;
}
.item-name {
  color: #0064e4;
}
</style>



